
<template>
	<div class="avatar-uploader"  :class="[form=='chang'?'rectangle':'']" >
		<el-upload
			:action="uploadURL"
			:data="uploadData"
      :headers="header"
			:show-file-list="false"
			:on-success="uploadSuccess"
			:before-upload="beforeUpload"
			accept="image/*">

			<i v-show="loading" class="el-icon-loading avatar-uploader-icon"></i>
			<img v-show="preview" :src="preview" class="avatar">

			<i v-show="!loading && !preview" class="el-icon-plus avatar-uploader-icon cameraIcon"></i>
      <p class="text" v-show="!preview">上传图片</p>
		</el-upload>

		<div class="icons" v-if="preview">
			<i class="el-icon-view"  @click.stop="view"></i>
      <i class="el-icon-delete" @click.stop="remove"></i>
		</div>
    <el-image ref="preview" :src="preview" :preview-src-list="previewList" style="display: none;"></el-image>
	</div>
</template>

<script>
	//import sign from '@/utils/apisign.js'
  import common from "@/api/api";
	export default {
		name: "single_image_upload",
		props: {
			imagePreview: {
				type: String,
        value:''
			},
			imageSource: {
				type: String
			},
      size:{   //750  添加商品限制
        type: String
      },
      imageSize:{//chang  长方形
        type: String
      },
      disabled:{
        type: Boolean,
        value: false
      }
		},
		watch: {
			imagePreview: function(value) {
				this.preview = value;
			},
			imageSource: function(value) {
				this.source = value
			},
      imageSize: function(value) {
      	this.form = value
      },
		},
		data() {
			return {
				/*		控制加载中		*/
				loading: false,
				/*		控制加载中		*/

				/*		控制查看图片		*/
				preview: "",
        previewList:[],
				source: "",
        ImgSize:'',
        form:'',
				dialogVisible: false,
        header:{
          AuthorizationMega:''
        },
				/*		控制查看图片		*/

				/*		文件上传控制数据		*/
				uploadURL: common.apihost+"/system/file/uploadFile",//this.$store.state.imageUploadURL
				uploadData: {fileType:1},
				/*		文件上传控制数据		*/
			}
		},
    mounted() {
      this.preview = this.imagePreview;
      this.form = this.imageSize;
      this.header.AuthorizationMega = localStorage.getItem('bossAppToken');
    },
		methods: {
			/*		图片上传前的处理	*/
			beforeUpload(file) {
				this.loading = true;
        if(this.size==750){
          this.loading = false;
          const is1M = file.size / 1024 / 1024 < 10; // 限制小于20M
            if (!is1M) {
                this.$message.error('图片尺寸限制为750 x 750，大小不可超过10MB，比例为1:1');
                return false;
            } else {
                const isSize = new Promise((resolve, reject) => {
                    const width = 750;
                    const height = 750;
                    const _URL = window.URL || window.webkitURL;
                    const img = new Image();
                    img.onload = () => {
                      let valid = false;
                      if(img.width>=width && img.height>=height){
                        if (img.width / img.height == '1') {
                          valid = true;
                        }
                      }
                      valid ? resolve() : reject();
                    };
                    img.src = _URL.createObjectURL(file);
                }).then(
                    () => {
                        return file;
                    },
                    () => {
                        this.$message.error('图片尺寸最小为750 x 750，大小不可超过10MB，比例为1:1');
                        return Promise.reject();
                    },
                );
                return isSize;
            }
        }else if(this.size==700){
          this.loading = false;
          const is1M = file.size / 1024 / 1024 < 10; // 限制小于10M
            if (!is1M) {
                this.$message.error('图片尺寸限制为700 x 230，大小不可超过10MB，比例为3:1');
                return false;
            } else {
                const isSize = new Promise((resolve, reject) => {
                    const width = 700;
                    const height = 230;
                    const _URL = window.URL || window.webkitURL;
                    const img = new Image();
                    console.log(img)
                    img.onload = () => {
                        let valid = false;
                        if(img.width>=width && img.height>=height){
                          if (img.width / img.height == '3.0434782608695654') {
                            valid = true;
                          }
                        }
                        valid ? resolve() : reject();
                    };
                    img.src = _URL.createObjectURL(file);
                }).then(
                    () => {
                        return file;
                    },
                    () => {
                        this.$message.error('图片尺寸限制为700 x 230，大小不可超过10MB，比例为3:1');
                        return Promise.reject();
                    },
                );
                return isSize;
            }
        }else if(this.size==280){
          this.loading = false;
          const is1M = file.size / 1024 / 1024 < 10; // 限制小于10M
            if (!is1M) {
                this.$message.error('图片尺寸限制为700 x 280，大小不可超过10MB，比例为5:2');
                return false;
            } else {
                const isSize = new Promise((resolve, reject) => {
                    const width = 700;
                    const height = 280;
                    const _URL = window.URL || window.webkitURL;
                    const img = new Image();
                    console.log(img)
                    img.onload = () => {
                        let valid = false;
                        if(img.width>=width && img.height>=height){
                          if (img.width / img.height == '2.5') {
                            valid = true;
                          }
                        }
                        valid ? resolve() : reject();
                    };
                    img.src = _URL.createObjectURL(file);
                }).then(
                    () => {
                        return file;
                    },
                    () => {
                        this.$message.error('图片尺寸限制为700 x 280，大小不可超过10MB，比例为5:2');
                        return Promise.reject();
                    },
                );
                return isSize;
            }
        }else if(this.size==200){
		          this.loading = false;
		          const is1M = file.size / 1024 / 1024 < 10; // 限制小于10M
		            if (!is1M) {
		                this.$message.error('图片尺寸限制为200 x 200，大小不可超过2MB，比例为1:1');
		                return false;
		            } else {
		                const isSize = new Promise((resolve, reject) => {
		                    const width = 200;
		                    const height = 200;
		                    const _URL = window.URL || window.webkitURL;
		                    const img = new Image();
		                    console.log(img)
		                    img.onload = () => {
		                        let valid = false;
		                        if(img.width>=width && img.height>=height){
		                          if (img.width / img.height == '1') {
		                            valid = true;
		                          }
		                        }
		                        valid ? resolve() : reject();
		                    };
		                    img.src = _URL.createObjectURL(file);
		                }).then(
		                    () => {
		                        return file;
		                    },
		                    () => {
		                        this.$message.error('图片尺寸限制为200 x 200，大小不可超过2MB，比例为1:1');
		                        return Promise.reject();
		                    },
		                );
		                return isSize;
		            }
		        }else if(this.size==340){
		          this.loading = false;
		          const is1M = file.size / 1024 / 1024 < 10; // 限制小于10M
		            if (!is1M) {
		                this.$message.error('图片尺寸限制为340 x 340，大小不可超过2MB，比例为1:1');
		                return false;
		            } else {
		                const isSize = new Promise((resolve, reject) => {
		                    const width = 340;
		                    const height = 340;
		                    const _URL = window.URL || window.webkitURL;
		                    const img = new Image();
		                    console.log(img)
		                    img.onload = () => {
		                        let valid = false;
		                        if(img.width>=width && img.height>=height){
		                          if (img.width / img.height == '1') {
		                            valid = true;
		                          }
		                        }
		                        valid ? resolve() : reject();
		                    };
		                    img.src = _URL.createObjectURL(file);
		                }).then(
		                    () => {
		                        return file;
		                    },
		                    () => {
		                        this.$message.error('图片尺寸限制为340 x 340，大小不可超过2MB，比例为1:1');
		                        return Promise.reject();
		                    },
		                );
		                return isSize;
		            }
		        }else if(this.size==300){
		          this.loading = false;
		          const is1M = file.size / 1024 / 1024 < 10; // 限制小于10M
		            if (!is1M) {
		                this.$message.error('图片尺寸限制为300 x 150，大小不可超过2MB，比例为2:1');
		                return false;
		            } else {
		                const isSize = new Promise((resolve, reject) => {
		                    const width = 300;
		                    const height = 150;
		                    const _URL = window.URL || window.webkitURL;
		                    const img = new Image();
		                    console.log(img)
		                    img.onload = () => {
		                        let valid = false;
		                        if(img.width>=width && img.height>=height){
                              console.log(img.width / img.height)
		                          if (img.width / img.height == 2) {
		                            valid = true;
		                          }
		                        }
		                        valid ? resolve() : reject();
		                    };
		                    img.src = _URL.createObjectURL(file);
		                }).then(
		                    () => {
		                        return file;
		                    },
		                    () => {
		                        this.$message.error('图片尺寸限制为300 x 150，大小不可超过2MB，比例为2:1');
		                        return Promise.reject();
		                    },
		                );
		                return isSize;
		            }
		        }else{
            let allowTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif']
            if (allowTypes.indexOf(file.type) == -1) {
            	this.$message.error('只能上传 jpg、png 或 gif 的图片');
            	return false
            }
            let promise = new Promise((resolve) => {
            	this.$nextTick(function () {
            		resolve(true)
            	})
            })
            return promise
        }
			},
			uploadSuccess(res) {
				this.loading = false
				if (res.code == 200) {
					this.preview = res.data.fullFilename;
					this.source =res.data.fullFilename;

					this.$emit('change', res.data.fullFilename)
				} else {
					this.$message.error(res.error_text)
				}
			},
			remove() {
        if(!this.disabled){
          this.preview = ''
          this.source = ''
          this.$emit('change', '')
        }else{
          this.$message.error('禁用状态不可删除');
        }

			},
			view() {
        this.previewList = [this.preview];
        this.$nextTick(()=>{
          this.$refs.preview.clickHandler();
        })

			}
		}
	}
</script>

<style scoped>
  .avatar-uploader.rectangle{
    width: 180px!important;
  }
  .avatar-uploader.rectangle .avatar{
    width:100%;
  }
.avatar-uploader .cameraIcon{
    height: 30px;
    line-height: 30px;
    margin-top: 20px;
    margin-bottom: 5px;
}
.avatar-uploader .text{
  margin:0px;
  color: #8c939d;
}
.avatar-uploader>div /deep/ div.el-upload,.avatar-uploader>div{
  height:100%;
  width:100%;
}
.avatar-uploader {
	width: 100px;
	height: 100px;
	border: 1px dashed #bbb;
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
}
.icons {
	position: absolute;
	display: none;
	width: 100px;
	height: 100px;
	line-height: 100px;
	left: 0;
	top: 0;
	z-index: 1000;
	background: #000;
	opacity: 0.75;
	text-align: center;
}
.icons i {
	margin: 0 10px;
	font-size: 24px;
	color: #fff;
}
.avatar-uploader .el-upload:hover {
	border-color: #409EFF;
}
.avatar-uploader:hover .icons {
	display: block;
}

.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 100px;
	height: 100px;
	line-height: 100px;
	text-align: center;
}
.avatar {
	width: 100px;
	height: 100px;
	display: block;
}
</style>
